<template>
  <div class="Classlist-panel-information">
    <div>
      <img
        src="@/assets/img/other/icon-班级信息.png"
        class="img-Classlist-information"
      /><span class="Classlist-span-information">班级信息</span>
    </div>
    <div class="Classlist-information-text" v-if="State.ClassProbablyInformationPanelBoolean">
      <div>
        <span class="span-text">班级名称</span>
        <div class="span-shu">
          <span></span>
        </div>
        <span class="span-value">{{
          State.ClassProbablyInformation.name
        }}</span>
      </div>
      <div>
        <span class="span-text">学生人数</span>
        <div class="span-shu">
          <span></span>
        </div>
        <span class="span-value">{{
          State.ClassProbablyInformation.userCount
        }}</span>
      </div>
      <div>
        <span class="span-text">负责老师</span>
        <div class="span-shu">
          <span></span>
        </div>
        <span class="span-value">{{
          State.ClassProbablyInformation.teacher
        }}</span>
      </div>
      <div>
        <span class="span-text">创建日期</span>
        <div class="span-shu">
          <span></span>
        </div>
        <span class="span-value">{{
          dateFormat(State.ClassProbablyInformation.creationTime)
        }}</span>
      </div>
    </div>
    <div class="Classlist-panel-information-btn" v-show="State.ClassProbablyInformationPanelBoolean">
      <div>
        <span @click="ComponDialogComponent.Dialogboolean=true">解散班级</span>
      </div>
    </div>
    <div class="Classlist-information-text-No" v-show="State.ClassProbablyInformationPanelBoolean===false">
      <span>暂无数据</span>
    </div>
  </div>
  <!-- 解散班级对话框 -->
  <DialogComponents 
    :DialogComponent = "ComponDialogComponent"
    @click="DissolutionClass"
  ></DialogComponents>
</template>

<script>
import { postData} from "@/assets/js/pubilcs.js";
import { defineComponent, reactive, watch, toRef, toRefs } from "vue";
import DialogComponents from "@/components/compon/DialogComponents.vue";
import bus from "@/bus";
export default defineComponent({
  name: "TeacherClassInformation",
  components: {
    DialogComponents
  },
  props: {
    ClassProbablyInformation: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    let State = reactive({
      ClassProbablyInformation: {},
      ClassProbablyInformationPanelBoolean:false,
    });
    //产品提示(通用对话框)
    let ComponDialogComponent=reactive({
      Dialogboolean:false,
      Msg:"是否解散此班级",
      Speanstyles:{
        
      },
      Buttonstyle:{
        background:'linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8)'
      },
      Buttonname:"确定",
    })
    //监听父组件ClassManagement传过来的数据
    watch(
      () => props.ClassProbablyInformation,
      (val, old) => {
        State.ClassProbablyInformation = val;
        if(Object.keys(State.ClassProbablyInformation).length===0){
          State.ClassProbablyInformationPanelBoolean=false
        }else{
          State.ClassProbablyInformationPanelBoolean=true
        }
      },
      {
        deep: true,
      }
    );
    //时间处理函数
    function dateFormat(dataStr) {
      let dateee = new Date(dataStr).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    }
    //解散班级
    function DissolutionClass(fn){
       if(fn==='Cancel'){
        ComponDialogComponent.Dialogboolean=false
      }
      if(fn==='Ready'){
        ComponDialogComponent.Msg="解散中,请稍等....."
        postData("/api/CourseManage/Delete",JSON.stringify({id:State.ClassProbablyInformation.id}),sessionStorage.getItem("token")).
        then(function (res) {
          console.log(res)
          if(res.success){
            //发布更新消息
            bus.$emit("UpdateHomeTaskPanel","Updates")
            ComponDialogComponent.Msg="是否解散此班级"
            ComponDialogComponent.Dialogboolean=false
          }
        })
        .catch((error) => {

        });
        
      }
    }
    return {
      dateFormat,
      State,
      ComponDialogComponent,
      DissolutionClass,
    };
  },
});
</script>
<style lang="less">
.Classlist-panel-information {
  position: absolute;
  width: 540px;
  height: calc(100% - 450px);
  background: #ffffff;
  border-radius: 16px;
  left: 520px;
  top: 440px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.Classlist-span-information {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}
.img-Classlist-information {
  position: absolute;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  left: 19px;
  top: 19px;
}
.Classlist-information-text > div:nth-child(1) {
  margin-top: 60px;
}
.Classlist-information-text > div {
  position: relative;
  display: flex;
  margin-top: 20px;
  width: 100%;
  height: 60px;
}
.Classlist-information-text .span-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 100%;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}
.Classlist-information-text .span-shu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1%;
  height: 100%;
  // background: linear-gradient(0deg, #807de1, #218cde);
}
.Classlist-information-text .span-shu span{
  display: flex;
  align-items: center;
  width: 1px;
  height: 12px;
  background: linear-gradient(0deg, #807de1, #218cde);
}
.Classlist-information-text .span-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 40%;
  height: 100%;
  font-size: 18px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  line-height: 20px;
  margin-left: 30px;
  color: #1b1b1d;
}
.Classlist-panel-information-btn{
  width: 100%;
  height: calc(100% - 70%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 40px;
}
.Classlist-panel-information-btn>div{
  width: 160px;
  height: 60px;
  font-size: 18px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #81859c;
  border: 1px solid #81859c;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  cursor: pointer;
}
.Classlist-panel-information-btn>div:hover{
  color: #ffffff;
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
}
.Classlist-information-text-No{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}
</style>
